import styles from './login.module.scss'
import initLoginBg from './init.ts'
import { ChangeEvent, useEffect, useState } from 'react'
import { Button, Input, Space } from 'antd'
import { captchaAPI } from '@/request/api.ts'
import './login.less'
const View = () => {
  useEffect(() => {
    initLoginBg()
    getCaptchImg()
    window.onresize = () => {
      initLoginBg()
    }
  }, [])
  const [usernameVal, setUsernameVal] = useState('')
  const [passwordVal, setPasswordVal] = useState('')
  const [captchaVal, setCaptchaVal] = useState('')
  const userNameChange = (e: ChangeEvent<HTMLInputElement>) => {
    setUsernameVal(e.target.value)
  }
  const passwordChange = (e: ChangeEvent<HTMLInputElement>) => {
    setPasswordVal(e.target.value)
  }
  const captchaChange = (e: ChangeEvent<HTMLInputElement>) => {
    setCaptchaVal(e.target.value)
  }
  const gotoLogin = () => {
    console.log(usernameVal, passwordVal, captchaVal)
  }

  const getCaptchImg = async () => {
    const res = await captchaAPI()
    console.log(res)
  }
  return (
    <>
      <div className={styles.loginPage}>
        {/* 存放背景 */}
        <canvas id="canvas" style={{ display: 'block' }}></canvas>
        {/* 登录盒子 */}
        <div className={styles.loginBox + ' loginbox'}>
          {/* 标题部分 */}
          <div className={styles.title}>
            <h1>通用后台系统</h1>
            <p>欢迎使用</p>
          </div>
          {/* 表单部分 */}
          <div className="form">
            <Space
              direction="vertical"
              size="middle"
              style={{ display: 'flex' }}
            >
              <Input
                placeholder="请输入用户名"
                onChange={userNameChange}
              ></Input>
              <Input.Password
                placeholder="请输入密码"
                onChange={passwordChange}
              ></Input.Password>
              <div className="captchaBox">
                <Input placeholder="验证码" onChange={captchaChange}></Input>
                <div className="captchaImg" onClick={getCaptchImg}>
                  <img
                    src="http://www.mxnzp.com/api_file/varitycode/8/e/d/1/f/9/2/e/d843f4db9c4c4e94a1a75d5f15e57433.jpg"
                    alt=""
                  />
                </div>
              </div>
              <Button
                type="primary"
                block
                onClick={gotoLogin}
                className="loginBtn"
              >
                登录
              </Button>
            </Space>
          </div>
        </div>
      </div>
    </>
  )
}

export default View
